<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TensorSpace - Hello World</title>
    <meta name="author" content="syt123450 / https://github.com/syt123450">

    <script src="../lib/three.min.js"></script>
    <script src="../lib/tween.min.js"></script>
     <script src="../lib/stats.min.js"></script>
    <script src="../lib/tf.min.js"></script>
    <script src="../lib/TrackballControls.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/tfjs-vis.umd.min.js"></script>
    <script src="../lib/chart.min.js"></script>
    <script src="../lib/signature_pad.min.js"></script>

    <script src="../../dist/tensorspace.min.js"></script>

    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>

</head>
<body>

<main>

    <p class="main-title">Draw Digit Here OωO</p>
    <div>
        <div class="wrapper">
            <canvas id="signature-pad" class="signature-pad" width=280 height=280></canvas>
        </div>
    </div>

    <div class="control-wrapper">
        <div id="clear" class="button">Clear</div>
        <div id="metrics" class="button2">Metrics</div>
    </div>

    <div class="digit-group">
        <div class="digit-result">
            <button id="data0" class="digit-button">
                <span>0</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data1" class="digit-button">
                <span>1</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data2" class="digit-button">
                <span>2</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data3" class="digit-button">
                <span>3</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data4" class="digit-button">
                <span>4</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
    </div>

    <div class="digit-group">
        <div class="digit-result">
            <button id="data5" class="digit-button">
                <span>5</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data6" class="digit-button">
                <span>6</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data7" class="digit-button">
                <span>7</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data8" class="digit-button">
                <span>8</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
        <div class="digit-result">
            <button id="data9" class="digit-button">
                <span>9</span>
                <span class="riffle-cover">
                    <span class="blob"></span>
                </span>
            </button>
        </div>
    </div>

</main>

</body>
</html>
